About Windows user interface diagrams

Show me an example

You can design user interfaces with the Windows User Interface template, a prototyping tool that includes all the controls you need before you begin coding. For example, you can create drop-down menus, tabbed dialog boxes, and toolbars.

Create a Windows user interface diagram


Create a Windows user interface diagram

Show me an example

  1. On the File menu, point to New, point to Software, and then click Windows User Interface.
  2. Drag shapes representing interface elements onto the drawing page from the Windows User Interface or Office User Interface stencils. Position them on top of each other to design drop-down menus, toolbars, dialog boxes, and so on.

Create a dialog box

Create an advanced wizard

Create a drop-down menu

Create a Windows toolbar

  3. Format the shapes as desired.

Click to show or hide information. Tip

Many shapes on the Windows User Interface stencil have options you can use to change their appearance or shape. Right-click the shape on the drawing page to access these options.

  4. Group the shapes on a dialog box or form before you move it, so you can move all the shapes at once while maintaining their positions within the dialog box.
  5. Save the drawing.


Create an advanced wizard (Windows user interface)

  1. Drag a Wizard UI (Advanced) shape from the Windows User Interface stencil onto the drawing page. Select Welcome as the wizard type and click OK.
  2. Format the wizard welcome page.

Click to show or hide information. How?

Do any of the following:

  • Subselect the title bar, then double-click it and enter the name of the wizard.
  • Subselect the body of the wizard form and click the Text tool on the toolbar. Enter information about what task the wizard helps the user complete.
  • Subselect and configure the buttons on the wizard form as necessary.
  3. Drag a Wizard UI (Advanced) shape from the Windows User Interface onto the drawing page. Select Interior as the wizard type and click OK.
  4. Format the interior wizard page.

Click to show or hide information. How?

Do any of the following:

  • Subselect the title bar, then double-click it and enter the name of the wizard.
  • Subselect the page title section of the wizard form; double-click it and enter information pertaining to the step this page of the wizard helps the user complete.
  • Drag interface elements onto the interior Wizard UI (Advanced) shape and use them to create the options you want on this wizard page.
  • Subselect and configure the buttons on the wizard form as necessary.
  5. Drag an additional Wizard UI (Advanced) shape onto the page for each step in your wizard, and format it as desired.
  6. For the final page of your wizard, drag a Wizard UI (Advanced) shape from the Windows User Interface onto the drawing page. Select Completion as the wizard type and click OK.
  7. Format the final wizard page.

Click to show or hide information. How?

Do either of the following:

  • Subselect the title bar, and then double-click it and enter the name of the wizard.
  • Subselect the page title section of the wizard form; double-click it and enter information pertaining to the settings and options the user has selected on the previous wizard pages.


Create a simple wizard (Windows user interface)

  1. Drag a Wizard UI (Simple) shape from the Windows User Interface stencil onto the drawing page.
  2. Format the wizard page:

Click to show or hide information. How?

  • Do any of the following:
  • Subselect the title bar, then double-click it and enter the name of the wizard.
  • Subselect the body section of the wizard form and click the Text tool on the toolbar. Enter any necessary information for the user.
  • Drag interface elements onto the Wizard UI (Simple) shape and use them to create the options you want on this wizard page.
  • Subselect the Back button. Right-click the shape, and select Disable Button.
  3. Drag an additional Wizard UI (Simple) shape onto the page for each step in your wizard, and format it as desired.

Note If you are creating a wizard for a task requiring more than three steps, use the Wizard UI (Advanced) shape.

  4. On the final wizard page, change the text on the Next button to Finish.

Click to show or hide information. Specify custom text for a Button shape

  1. Right-click the shape, then click Set Button Text.
  2. In the Button Text field, select Other, and click OK.
  3. Double-click the Button shape, and type the text you want to appear on the button.

  5. Save the drawing.


Create a Windows toolbar

  1. Drag a Toolbar shape onto the drawing page from the Windows User Interface stencil. Size the toolbar as necessary. To hide the drag handle on the toolbar, right-click and select Hide Handle.
  2. Drag a Toolbar Button shape onto the drawing page from Windows User Interface stencil. In the Custom Properties dialog box, select the type of button you want.

Note To specify a button type later, right-click the shape, and then select Set Button Type.

  3. Position the button on the toolbar and connect it using connection points [image]. Format the button as desired.

To display or hide the button shape behind a toolbar icon, right-click the shape, and select Show Button or Hide Button.

  4. Optional: For a custom toolbar button, drag a Blank Toolbar shape onto the drawing page and connect it to the toolbar.
  5. Optional: For a separator between button, drag a Toolbar Separator shape onto the drawing page and connect it to the toolbar.
  6. Continue connecting Toolbar Button, Blank Toolbar, and Toolbar Separator shapes onto the toolbar until it is complete.


Create an Office toolbar

  1. Drag a Toolbar shape onto the drawing page from the Office User Interface stencil.
  2. Drag a side selection handle to size the toolbar. Subselect the title, and then type to replace the text.
  3. Customize the appearance of the toolbar by right-clicking the toolbar, selecting options, and then dragging control handles on the shape.
  4. Drag an icon shape onto the toolbar from the Office User Interface stencil to create a button.
  5. In the Custom Properties dialog box, choose the button type, and then click OK.

Note To specify a button type later, right-click the shape, and then choose Set Icon Type.

  6. Glue the left endpoint [image] of the icon shape to the connection point [image] on the left side of the toolbar. Glue the right endpoint [image] of the Icon shape to the connection point [image] on the right side of the toolbar. When glued, the endpoints will change from green to red.
  7. Drag the control handle [image] on the icon shape to position it horizontally on the toolbar.

Click to show or hide information. Customize the appearance of an Office toolbar shape

  • To create an embedded toolbar, right-click the shape, and then choose Set To Embedded Toolbar.
  • To widen the selection indicator, right-click the shape, and then choose Widen Selection Indicator until the button is the width you want.
  • To reset the selection indicator width to the default, right-click the shape, and then choose Reset Selection Indicator.
  • To change the location of the selection indicator, drag the control handle [image] on the indicator.
  • To change the position of a toolbar division, drag the control handle [image] on the division.
  • To add toolbar divisions, drag the control handle [image] on the left side of the toolbar.

  8. Continue connecting icon shapes to the toolbar until the toolbar is complete.


Create a drop-down menu (Windows user interface)

  1. Drag a Menu Item shape onto the drawing page from the Windows User Interface stencil.

If the menu is not an application menu, and you want to hide the control handle, right-click the shape and click Hide Handle.

  2. Drag a Top-Level Menu Item shape onto the drawing page from the Windows User Interface stencil. Position it on top of the Menu shape and connect it by attaching the connection points [image]. Double-click to add text (the shape expands to accommodate text).
  3. Drag a Drop-Down Menu shape from the stencil and position it below the Top-Level Menu Item shape. Connect it to the Menu shape by attaching the connection points [image]. Double-click to add text; resize the shape if necessary.
  4. Format the menu item as desired.

Click to show or hide information. Highlight a menu item

Right-click the shape, and select Highlight Menu Item.

Click to show or hide information. Select the style and position of a menu item

  1. Right-click the shape, and select Menu Item Properties.
  2. Specify the desired style of the menu item (such as normal, radio button, check box, or cascading).
  3. Specify the desired position of the menu item in the drop-down menu. For example, for the uppermost menu item, select Top to add an upper bevel to the menu item. For the bottom menu item, select Bottom to add a lower bevel to the menu. Single menu items have bevels on both top and bottom, and menu items in the middle have no bevel.
  4. Click OK.

Click to show or hide information. Select or check a menu item

Right-click the shape, and select Select/Check Menu Item or Deselect/Uncheck Menu Item.

Note This option is only available if you have set the menu item style to Checked or Radio.

Click to show or hide information. Add a separator between menu items

  1. Drag a Drop-Down Menu shape from the Windows User Interface stencil and position it at the point in the menu where you want to add a separator.
  2. Right-click the shape and select Menu Item Properties.
  3. For the menu item style, select Separator. Click OK.

  5. Drag additional Drop-Down Menu Item shapes from the stencil onto the drawing page and format them until the menu is complete.
  6. Add additional Top-Level Menu Item shapes until the menu is complete.

Click to show or hide information. Tip

A group of radio button menu items indicates that several different, mutually-exclusive states are available, such as when several different views of a current file are available.

Check box menu items indicate an on/off state for a particular menu item, or that a menu displays multiple user-initiated states, but only one state can be active. An example is a window menu showing which child window is currently active.

Cascading menu items indicate that a sub-menu is available from the current menu item.


Create a dialog box (Windows user interface)

  1. On the File menu, point to New, point to Software, and then click Windows User Interface.
  2. Drag a Blank Form shape onto the drawing page from the Windows User Interface stencil. Double-click the shape and enter the dialog box title.
  3. Optional: If you want an inactive dialog box, right-click the form, and then click Set To Inactive Window.
  4. Drag shapes that represent the interface elements you want on your dialog box (such as buttons, check boxes, and icons) from the stencil onto the form.
  5. Position the shapes and format them as desired.

Click to show or hide information. Tip

Many shapes on the Windows User Interface stencil have options you can use to change their appearance or shape. Right-click the shape on the drawing page to access these options.

  6. Optional: Add dialog box tabs as desired.

Click to show or hide information. Create a dialog box tab

  1. Create a dialog box.
  2. Drag a Tab control shape from the Windows User Interface stencil onto the drawing page.
  3. With the shape selected, type the text for the tab. Size the tab as necessary.
  4. Drag an Additional tabs shape from the stencil and glue one of its endpoints ( [image] or [image]) to a connection point [image] on the first tab. When glued, the endpoint will change from green to red.

Additional tab shape glued by connection point to previous tab. Red connection point denotes correct connection.

  5. With the shape selected, type the text for the tab.
  6. Continue dragging Additional tabs shapes onto the drawing page until your interface is complete.
  7. Format the tabs as desired. To set a tab as the active tab, right-click the shape and click Move Tab to Top.
  8. Add controls to the tab.

  7. Save the drawing.


Windows user interface diagram example

User interface diagram containing four tabs. Each tab includes interface elements such as buttons, check boxes, and drop-down menus.


Create a dialog box tab (Windows user interface)

  1. Create a dialog box.
  2. Drag a Tab control shape from the Windows User Interface stencil onto the drawing page.
  3. With the shape selected, type the text for the tab. Size the tab as necessary.
  4. Drag an Additional tabs shape from the stencil and glue one of its endpoints ( [image] or [image]) to a connection point [image] on the first tab. When glued, the endpoint will change from green to red.

Additional tab shape glued by connection point to previous tab. Red connection point denotes correct connection.

  5. With the shape selected, type the text for the tab.
  6. Continue dragging Additional tabs shapes onto the drawing page until your interface is complete.
  7. Format the tabs as desired. To set a tab as the active tab, right-click the shape and click Move Tab to Top.
  8. Add controls to the tab.


Create a status bar (Windows user interface)

  1. Drag the Status Field shape from the Windows User Interface stencil onto a form that represents a window.
  2. Glue the endpoints ( [image] and [image]) on the status field to the connection points [image] on the bottom of the form. When glued, the endpoints will change from green to red. Double-click to add text.
  3. Optional: To set the status field style, right-click the status field, and then choose Raised, Inset or Flat. You can also choose whether to show the status field as enabled or disabled.
  4. Resize the length of the Status Field shape to fit the status fields you want across the bottom of the form.
  5. Continue to drag Status Field shapes from the stencil and connect them to the bottom of the form until you have completed the status bar. Add text and style the status fields as desired.


Customize the appearance of an Office toolbar shape

  • To create an embedded toolbar, right-click the shape, and then choose Set To Embedded Toolbar.
  • To widen the selection indicator, right-click the shape, and then choose Widen Selection Indicator until the button is the width you want.
  • To reset the selection indicator width to the default, right-click the shape, and then choose Reset Selection Indicator.
  • To change the location of the selection indicator, drag the control handle [image] on the indicator.
  • To change the position of a toolbar division, drag the control handle [image] on the division.
  • To add toolbar divisions, drag the control handle [image] on the left side of the toolbar.


Check Box shape (Windows user interface)

Use the Check Box shape to represent a check box that can be selected or cleared, enabled or disabled. Check boxes are used when an option can only have two states.

Click to show or hide information. Add text to a Check Box shape

Double-click the shape and enter the text.

Click to show or hide information. Set a Check Box shape as checked or not checked

Right-click the shape, and click Set Checked or Set Unchecked.

Click to show or hide information. Enable or disable a Check Box shape

Right-click the shape, and then click Enable <shape> or Disenable <shape>.


Radio Button shape (Windows user interface)

Use the Radio Button shape to represent a radio button that can be selected or cleared, enabled or disabled. Radio buttons are used when a finite number of states can be selected, and are useful in displaying all possible choices on the user interface at once.

A group of radio button menu items indicates that several different, mutually-exclusive states are available, such as when several different views of a current file are available.

Click to show or hide information. Add text to a Radio Button shape

Double-click the shape and enter the text.

Click to show or hide information. Set a Radio Button shape as selected or cleared

Right-click the shape, and click Set Selected or Set Unselected.

Click to show or hide information. Enable or disable a Radio Button shape

Right-click the shape, and then click Enable <shape> or Disenable <shape>.


Button shape (Windows user interface)

Use the Button shape to represent a dialog box button, such as Back, Next, Cancel or OK.

Click to show or hide information. Specify the type of Button

Right-click the shape, and then click Set Button Text.

Click to show or hide information. Specify custom text for a Button shape

  1. Right-click the shape, then click Set Button Text.
  2. In the Button Text field, select Other, and click OK.
  3. Double-click the Button shape, and type the text you want to appear on the button.

Click to show or hide information. Change the state of a Button shape

Right-click the button, and click the button state you want.

  • Normal
  • Default displays a dark border around the button. Default buttons signify that the action that will occur if the user hits the RETURN key.
  • Selected and Default displays a dark border around the button, and a selection rectangle around the button text. Denotes the button that currently has keyboard or selection focus.

Click to show or hide information. Tip

Placing a Mouse Pointer shape over a button in this state is useful for demonstrating a user's mouse-click action.

  • Disable Button displays button text as gray. Denotes a button that is unavailable to the user.


Combo Box and Combo Box Pull-down shape (Windows user interface)

Use the Combo Box shape to represent a field in which the user can select a value from a finite list of options, or when the application will add the user's typed value to the current list of available options. Connect a Combo Box Pull-down shape to the Combo Box shape to display a menu of the choices available for that option.

Click to show or hide information. Add text to a Combo Box or Combo Box Pull-down shape

Double-click the shape and enter the text.

Click to show or hide information. Create a combo box with its list showing

  1. Drag a Combo Box shape from the Windows User Interface stencil.
  2. Drag a Combo Box Pull-Down shape from the Windows User Interface stencil.
  3. Connect the Combo Box Pull-Down shape to the bottom of the Combo Box shape.

Click to show or hide information. Enable or disable a Combo Box shape

Right-click the shape, and then click Enable <shape> or Disenable <shape>.

Click to show or hide information. Enable or disable a Combo Box Pull-down shape

Right-click the shape, and click Enable Text or Disable Text.

Click to show or hide information. Enable or disable the scroll bar on a Combo Box Pull-down shape

Right-click the shape, and click Enable Scroll Bar or Disable Scroll Bar.

Click to show or hide information. Display or hide the scroll bar on a Combo Box Pull-down shape

Right-click the shape, and click Show Scroll Bar or Hide Scroll Bar.

Click to show or hide information. Specify the size of the scroll bar thumb on a Combo Box Pull-down shape

  1. Right-click the shape, and click Set Thumb Size.
  2. Enter the desired size of the thumb as a percentage of the total scroll bar size. For example, enter 33 if you want the thumb to be one-third of the scroll bar size.
  3. Click OK.

Click to show or hide information. Position the thumb on the scroll bar of a Combo Box Pull-down shape

Subselect the thumb and move it to the desired position.


List Box shape (Windows user interface)

Use the List Box shape to represent a list of options or settings. List boxes can show several available options at once, and can permit the user to choose two or more values simultaneously.

Click to show or hide information. Enable or disable a List Box shape

Right-click the shape, and click Enable Text or Disable Text.

Click to show or hide information. Enable or disable the scroll bar on a List Box shape

Right-click the shape, and click Enable Scroll Bar or Disable Scroll Bar.

Click to show or hide information. Display or hide the scroll bar on a List Box shape

Right-click the shape, and click Show Scroll Bar or Hide Scroll Bar.

Click to show or hide information. Specify the size of the scroll bar thumb on a List Box shape

  1. Right-click the shape, and click Set Thumb Size.
  2. Enter the desired size of the thumb as a percentage of the total scroll bar size. For example, enter 33 if you want the thumb to be one-third of the scroll bar size.
  3. Click OK.

Click to show or hide information. Position the thumb on the scroll bar of a List Box shape

Subselect the thumb and move it to the desired position.


Text Box shape (Windows user interface)

Use the Text Box shape to represent an area, with adjustable scroll bars, into which the user can enter text. Text boxes have no size limitations, so they can serve as the main presentation area of an application, such as a word processor or Web browser.

Click to show or hide information. Enable or disable a Text Box shape

Right-click the shape, and click Enable Text or Disable Text.

Click to show or hide information. Enable or disable the scroll bar on a Text Box shape

Right-click the shape, and click Enable [Vertical or Horizontal] Scroll Bar or Disable [Vertical or Horizontal] Scroll Bar.

Click to show or hide information. Display or hide the scroll bar on a Text Box shape

Right-click the shape, and click Show [Vertical or Horizontal] Scroll Bar or Hide [Vertical or Horizontal] Scroll Bar.

Click to show or hide information. Specify the size of the vertical or horizontal scroll bar thumb on a Text Box shape

  1. Right-click the shape, and click Set Thumb Size.
  2. Enter the desired size of the thumb as a percentage of the total scroll bar size. For example, enter 33 if you want the thumb to be one-third of the scroll bar size.
  3. Click OK.

Click to show or hide information. Position the thumb on the scroll bar of a Text Box shape

Subselect the thumb and move it to the desired position.


Scroll Bar shape (Windows user interface)

Use the Scroll Bar shape to a horizontal or vertical scrollbar.

Click to show or hide information. Enable or disable a Scroll Bar shape

Right-click the shape, and then click Enable <shape> or Disenable <shape>.

Click to show or hide information. Create a horizontal scroll bar

With the shape selected, click the Shape menu, point to Rotate or Flip, and click Rotate Left or Rotate Right.

Click to show or hide information. Specify the size of the scroll bar thumb

  1. Right-click the shape, and click Set Thumb Size.
  2. Enter the desired size of the thumb as a percentage of the total scroll bar size. For example, enter 33 if you want the thumb to be one-third of the scroll bar size.
  3. Click OK.

Click to show or hide information. Position the thumb on a Scroll Bar shape

Subselect the thumb and move it to the desired position.


Panel shape (Windows user interface)

Use the Panel shape to create either a sunken status window within a dialog, or a non-standard sized button.

Click to show or hide information. Change the appearance of a Panel shape

Right-click the shape.

To change the appearance of the panel edges, select Inset or Raised. Inset panels are used in dialog boxes to represent the effect of the dialog box's current settings (such as formatting settings upon text) or as a scratchpad area for the mouse. Raised panels are often used to create non-standard shaped buttons, such as a square button.

To change the background color of the panel, select Grey Background or White Background.

Note If you select White Background, by default the panel edges are set to Inset. Similarly, if you select Raised, by default the panel color is set to Gray Background.


Tab control and Additional tabs shapes (Windows user interface)

Use the Tab control shape to represent a tab on a dialog box. Connect Additional tabs shapes to the Tab control shape to represent multiple available tabs.

Click to show or hide information. Enable or Disable a Tab control or Additional tab shape

Right-click the shape, and then click Enable <shape> or Disenable <shape>.

Click to show or hide information. Set a tab as the active tab on a dialog box

Right-click the shape, and select Move Tab to Top.

Click to show or hide information. Set a tab as inactive

Right-click the shape, and select Move Tab to Back.


Progress bar and Progress bar 2 shapes (Windows user interface)

Use the Progress bar and Progress bar 2 shapes to represent a graphical display of the completion rate of a process.

Click to show or hide information. Change the completion percent on a progress bar

Select the control handle [image]; drag to the left to decrease the completion percent, drag to the right to increase the completion percent.

Click to show or hide information. Display or hide the percentage text on a Progress bar 2 shape

Right-click the shape, and select Show Text or Hide Text.

Click to show or hide information. Display or hide the percent symbol on a Progress bar 2 shape

Right-click the shape, and select Show Percent Symbol or Hide Symbol.


Slider shape (Windows user interface)

Use the Slider shape to represent an interface element that enables the user to graphically set the level of a process, or to choose between a finite list of numerical values, especially when the actual numerical setting has little meaning to the user.

Click to show or hide information. Change the appearance of a Slider shape

Right-click the shape, select Set Appearance, and select the desired tick style.

Click to show or hide information. Create a vertical slider

With the shape selected, click the Shape menu, point to Rotate or Flip, and click Rotate Left or Rotate Right.

Click to show or hide information. Position the slider bar

Select the control handle [image] and drag.


Top-Level Menu Item shape (Windows user interface)

Connect Top-Level Menu Item shapes to a Menu shape to represent a primary menu item

Click to show or hide information. Change the appearance of a top-level menu item

Right-click the shape, and select Raised, Inset, or Flat. Raised menu items indicate that the user's mouse is hovering over the menu item, or that the menu item has focus but is presently collapsed. Inset menu items indicate that the user has either clicked on the menu item, or has used keyboard accelerators to display the menu.

Click to show or hide information. Enable or disable a top-level menu item

Right-click the shape, and then click Enable <shape> or Disenable <shape>.


Drop-Down Menu Item shape (Windows user interface)

Connect Drop-Down Menu Item shapes to a Top-Level Menu Item shape to represent the complete menu, including menu dividers, that appears when you click a top-level menu item.

Click to show or hide information. Highlight a menu item

Right-click the shape, and select Highlight Menu Item.

Click to show or hide information. Select the style and position of a menu item

  1. Right-click the shape, and select Menu Item Properties.
  2. Specify the desired style of the menu item (such as normal, radio button, check box, or cascading).
  3. Specify the desired position of the menu item in the drop-down menu. For example, for the uppermost menu item, select Top to add an upper bevel to the menu item. For the bottom menu item, select Bottom to add a lower bevel to the menu. Single menu items have bevels on both top and bottom, and menu items in the middle have no bevel.
  4. Click OK.

Click to show or hide information. Select or check a menu item

Right-click the shape, and select Select/Check Menu Item or Deselect/Uncheck Menu Item.

Note This option is only available if you have set the menu item style to Checked or Radio.

Click to show or hide information. Add a separator between menu items

  1. Drag a Drop-Down Menu shape from the Windows User Interface stencil and position it at the point in the menu where you want to add a separator.
  2. Right-click the shape and select Menu Item Properties.
  3. For the menu item style, select Separator. Click OK.

Click to show or hide information. Tip

A group of radio button menu items indicates that several different, mutually-exclusive states are available, such as when several different views of a current file are available.

Check box menu items indicate an on/off state for a particular menu item, or that a menu displays multiple user-initiated states, but only one state can be active. An example is a window menu showing which child window is currently active.

Cascading menu items indicate that a sub-menu is available from the current menu item.


Toolbar Button shape (Windows user interface)

Use Toolbar Button shapes to represent icons found on an interface toolbar.

Click to show or hide information. Select the type of button

Right-click the shape, and then choose Set Button Type.

Click to show or hide information. Display or hide the button shape behind a toolbar icon

Right-click the shape, and select Show Button or Hide Button.


Create a tree view (Windows user interface)

  1. Drag a Panel shape from the Windows User Interface stencil onto a form that represents a user interface.
  2. Right-click the Panel shape and choose White Background. Resize the panel as desired.
  3. Drag a Tree View shape from the stencil onto the panel. Double-click to add text.
  4. To add an icon to indicate whether the tree view item is expandable or collapsible, drag a Tree Node shape from the stencil and connect it to the far left connection point of the Tree View shape. Select Expandable or Collapsible as the tree node type.
  5. Optional: For an icon denoting the type of tree view item, drag the appropriate icon from the Windows User interface stencil and position it between the Tree Node shape and the text of the Tree View shape. For a file and folder icon, drag another Tree Node shape from the stencil and select Document, Open Folder or Closed Folder as the tree node type.

Click to show or hide information. Tip

If you want to make sure the horizontal indention of a Tree View shape can't be changed, right-click the shape and select Lock Horizontal Movement.

  6. Continue dragging Tree Node and Tree View shapes onto the panel until you have constructed the desired tree view structure. Connect the shapes and add text as desired.